<template>
  <div class="legend-wrap" v-if="legendData.length">
    <div class="legend-body">
      <template v-for="(item,index) in legendData">
        <div class="img" :key="index">
          <span class="map-leg-icon" :style="`background: ${item.color}`"></span>
          <span>{{ item.name }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { getMapLayers, queryLegend } from '../libs/methods'

export default {
  name: 'MapLegend',
  inject: ['myMap'],
  props: {
    legend: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      legendData: [...this.legend]
    }
  },
  methods: {
    getMapLegend () {
      this.legendData = [...this.legend]
      const { map } = this.myMap
      const layres = getMapLayers(map).filter(n => !n.__MY_LAYER__ && n.values_name !== 'tem' && n.values_.type !== 'super')
      if (!layres) return
      layres.forEach(async item => {
        if (item.values_ && item.values_.type !== 'super') return
        const a = await queryLegend(item) || []
        a.forEach(legenditem => {
          this.legendData.push({
            name: legenditem.caption,
            color: `rgba(${legenditem.style.fillForeColor.red}, ${legenditem.style.fillForeColor.green}, ${legenditem.style.fillForeColor.blue}, 1)`
          })
        })
      })
    }
  },
  created () {
    this.myMap.mapReady(this.getMapLegend)
  }
}
</script>
<style lang="less" scoped>
.legend-wrap {
  overflow: hidden;
  padding: 24px 0 24px 24px;
  .legend-body {
    overflow-y: auto;
    padding-right: 24px;
    max-height: 300px;
  }
  img {
    width: 30px;
  }
  span {
    padding-left: 16px;
  }
  .map-leg-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
}
</style>
